import {Button, Divider, message, Popconfirm, Select} from 'antd';
import React, {useState, useRef, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {queryRule,exportRecord,removeRule,endCheck} from './service';
import {saveFileAs} from '@/utils/utils';

import Access from '@/components/Access/Access';

const TableList = (props) => {
  const actionRef = useRef();
  const [storeArray, setStoreArray] = useState([]);
  const [count, setCount] = useState();
  const [exportCheckDetails, setExportCheckDetails] = useState(false);
  const [deleteCheck, setDeleteCheck] = useState(false);

  const getStore = () => {
    setStoreArray([
      {
        name:"超市"
      },
      {
        name:"化肥"
      },
      {
        name:"原料"
      },
      {
        name:"其他"
      }
    ])
  };
  useEffect(() => {
    getStore();
  }, []);

  const columns = [
    {
      title: '盘点名目',
      dataIndex: 'storeName',
      hideInTable: true,
      renderFormItem: (item, {defaultRender, ...rest}, form) => {
        return (
          <Select
            placeholder="请选择盘点名目"
            showSearch
          >
            {
              storeArray.map((item_, index) => {
                return (
                  <Select.Option value={item_.name} key={item_.name} >
                    {item_.name}
                  </Select.Option>
                );
              })}
          </Select>
        );
      },
    },
    {
      title: '盘点名目',
      dataIndex: 'storeName',
      hideInSearch:true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch:true,
      valueEnum: {
        true: {
          text: '已结束',
          status: 'Success',
        },
        false: {
          text: '盘点中',
          status: 'Error',
        },
      },
    },
    {
      title: '盘点时间',
      dataIndex: 'createTime',
      valueType: 'date',
      hideInSearch:true,
      render: (_, record) => {
        if (record.createTime) {
          return new Date(record.createTime).toLocaleString();
        } else {
          return '-';
        }
      },
    },
    {
      title: '发起人',
      hideInSearch:true,
      dataIndex: 'creator',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => {
        return (
          <>
            <div style={{
              display: "flex",
              overflow: "hidden"
            }}>
              <Access accessKey={"@exportCheckDetails"}>
                <Button
                  type="dashed"
                  shape="round"
                  ghost
                  danger
                  block
                  loading={exportCheckDetails}
                  onClick={() => {
                    setExportCheckDetails(!exportCheckDetails);
                    exportRecord({checkId:record.id}).then(res=>{
                      if (res){
                        saveFileAs(res, '盘点表');
                      }
                      setExportCheckDetails(false);
                    })
                  }}
                >
                  导出盘点表
                </Button>
              </Access>
              <Access accessKey={"@endCheck"}>
                <Button
                  type="primary"
                  loading={deleteCheck}
                  style={{
                    marginLeft: "10px"
                  }}
                  onClick={() => {
                    if (record.status){
                      message.error("已结束！");
                    }else{
                      endCheck({
                        checkId:record.id
                      }).then(res=>{
                        actionRef.current.reload();
                      })
                    }
                  }}
                >
                  立即结束
                </Button>
              </Access>
              <Access accessKey={"@deleteCheck"}>
                <Button
                  type="primary"
                  danger
                  loading={deleteCheck}
                  style={{
                    marginLeft: "10px"
                  }}
                  onClick={() => {
                    setDeleteCheck(!deleteCheck);
                    removeRule(record.id).then(res=>{
                      actionRef.current.reload();
                      setDeleteCheck(false);
                    })
                  }}
                >
                  删除
                </Button>
              </Access>
            </div>
          </>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="盘点记录"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1200}}
        bordered
        request={(params, sorter, filter) => queryRule({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        columns={columns}
        pagination={{
          defaultPageSize: 30,
          showSizeChanger: true,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
      />
    </PageContainer>
  );
};

export default TableList;
